import {
    WebGLRenderer, Scene,
    PerspectiveCamera, Object3D,
    AxesHelper,
} from 'three'
import State from 'three/examples/jsm/libs/stats.module.js'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { useEffect } from 'react'
interface ReturnInfo {
    renderer: WebGLRenderer,
    scene: Scene,
    camera: PerspectiveCamera,
    orbitControls: OrbitControls,
    state: State
}
export async function useComponents(models: Object3D | Array<Object3D>) {
    return new Promise<ReturnInfo>((re, rj) => {
        let renderer: WebGLRenderer,
            orbitControls: OrbitControls;
        const scene = new Scene(),
            camera = new PerspectiveCamera(100,),
            axesHelper = new AxesHelper(),
            state = new State()
        scene.add(axesHelper)

        if (Array.isArray(models)) {
            scene.add(...models)
        } else {
            scene.add(models)
        }
        function run(t: number) {
            state.update()
            renderer.render(scene, camera);
            requestAnimationFrame(run);
        }
        useEffect(() => {
            renderer = new WebGLRenderer()
            document.body.appendChild(state.dom)
            // orbitControls = new OrbitControls(camera, renderer.domElement)
            re({ renderer, scene, camera, orbitControls, state })
            run(0)
            return () => {
                // renderer.dispose()
            }
        }, [])
    })
}